<template>
	<view v-if="showadvs" class="advs isfixed">
		<view class="bg" :style="'background: ' + mydata.bg + ';opacity:' + mydata.opacity / 100"></view>
		<view :class="'swiper-box ' + mydata.showtype">
			<view class="swiper_div">
				<swiper class="swiper" @change="changesilde" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(item, i) in mydata.imglist" :key="i">
						<view class="swiper-item" @click="Jumpurl(item.linkdata)">
							<vimage class="swiper-img" style="object-fit: cover;object-position: center center;" :src="item.url" v-if="item.url"></vimage>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="dots round">
				<view v-for="(item, i) in mydata.imglist" :key="i" :class="activeIndex == i ? 'dot active' : 'dot'" :style="'background:' + mydata.bg"></view>
			</view>

			<text @click="onFinish" class="close" v-if="mydata.showtype != 'full'"><text class="iconfont el-sc-icon-1"></text></text>
			<view v-else class="count-down">
				<CountDown @timeup="onFinish" :second="mydata.time"></CountDown>
				<text class="close-count" @click="onFinish" v-if="mydata.c_btns">关闭</text>
			</view>
		</view>
	</view>
</template>

<script>
import CountDown from '@/components/linnian-CountDown/uni-countdown.vue';
export default {
	props: {
		mydata: {
			type: Object,
			default: {}
		}
	},
	components: {
		CountDown
	},
	data() {
		return {
			activeIndex: 0,
			time: 10000,
			showadvs: false
		};
	},
	mounted() {
		if (this.mydata.showtime == 1) {
			this.showadvs = true;
		} else {
			let time = uni.getStorageSync('advs_time') || null;
			let ntime = new Date();
			if (!time) {
				
				uni.setStorageSync('advs_time',ntime)
				this.showadvs = true;
			}else{
				if(ntime - new Date(time) > this.mydata.stime*60*1000){
					this.showadvs = true;
					uni.setStorageSync('advs_time',ntime)
				}
			}
		}
	},
	methods: {
		changesilde(e) {
			this.activeIndex = e.detail.current;
		},
		onFinish() {
			this.showadvs = false;
		}
	}
};
</script>
<style></style>
<style lang="scss" scoped>
.advs {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999999;
	width: 100%;
	height: 100vh;
	.bg {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	.swiper-box {
		width: 280px;
		max-height: 428px;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		transform: translate(0, -24.42997px);
		.swiper_div {
			height: 428px;
			.swiper {
				height: 428px;
			}
		}
		.swiper-img {
			text-align: center;
			width: 100%;
			display: block;
		}
		.close {
			margin: 0 auto;
			left: 0;
			right: 0;
			position: absolute;
			color: #fff;
			border-radius: 50%;
			bottom: -50px;
			text-align: center;
			transform: rotate(45deg);
			.iconfont {
				width: 30px;
				height: 30px;
				font-size: 30px;
			}
		}
		&.top {
			transform: translate(0, 0);

			.swiper-img {
				height: 428px;
				border-radius: 6px;
			}
			.close {
				width: 30px;
				height: 30px;
				top: -56px;
				right: 0;
				left: auto;
				position: absolute;
				color: #fff;
			}
		}
		&.bot {
			.swiper-img {
				height: 428px;
				border-radius: 6px;
			}
		}
		&.full {
			width: 100%;
			height: 100%;
			max-height: 100%;
			transform: translate(0, 0);
			top: 0;
			.swiper_div {
				height: 100vh;
				.swiper {
					height: 100vh;
				}
				.swiper-img {
					height: 100vh;
				}
			}
			.count-down {
				position: absolute;
				bottom: 60px;
				right: 12px;
				z-index: 100;
				color: #fff;
				display: flex;
				flex-wrap: nowrap;
				height: 24px;
				line-height: 1;
				text-align: center;
				display: flex;
				justify-content: center;
				font-size: 12px;
				line-height: 24px;
				padding: 0 8px;
				overflow: hidden;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 14px;
				.time {
					margin-right: 2.5px;
				}
			}
		}
	}
}
.dots {
	position: absolute;
	display: flex;
	bottom: 9.77199px;
	box-sizing: border-box;
	padding: 0 14.65798px;
	left: 0;
	right: 0;
	justify-content: center;
	z-index: 1000;
	list-style: none;
	.dot {
		width: 6px;
		height: 6px;
		background: #fff;
		margin: 0 3px;
		opacity: 0.54;

		&.active {
			opacity: 1;
		}
	}

	&.round {
		.dot {
			border-radius: 50%;
		}
	}
}
</style>
